<template>
  <el-main>
    <div class="t4_banner">
      <div class="t4_w">
        <div class="t4_bannerBOX">
          <el-input v-model="searchInfo" type="text" name="keywords" id="keywords" placeholder="请输入资源名称" clearable
            @keyup.enter.native="searchHandle">
            <el-button @click="getListData()" slot="append" icon="el-icon-search">搜索</el-button>
          </el-input>
          <!--          <ul class="list_Ul">-->
          <!--            <li v-for="(item, index) in hotWordList" :key="index">-->
          <!--              <a @click="hotClick(item)">{{ item.apiName }}</a>-->
          <!--            </li>-->
          <!--          </ul>-->
        </div>
      </div>
    </div>
    <div class="t4_content">
      <div class="t4_contents_top">
        <div class="t4_w" style="position: relative">
          <div class="t4_local">
            <span class="local-tag"><img src="@/assets/images/sub_ts.png" alt="" /></span>
            <a href="/">首页</a> &gt; 资源数据 &gt; 数据目录
          </div>
          <div class="t4_API_cons">
            <div class="t4_l t4_l_nav">
              <div class="t4_l_cons t4_nav_cons_t">
                <ul class="t4_ulsb" style="padding: 0">
                  <li style="width: 100%; cursor: default">数据目录</li>
                </ul>

                <el-input style="margin: 8px 0 8px" placeholder="输入关键字进行过滤" size="medium" clearable
                  v-model="filterText">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <div class="t4_sub_cons">
                  <el-tree style="background: none" @node-click="chooseDeptList" :expand-on-click-node="false"
                    class="filter-tree" :data="deptArr" :props="defaultProps" :filter-node-method="filterNode"
                    default-expand-all highlight-current node-key="id" ref="tree">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>{{ node.label }}&nbsp;({{ data.dataCount }})</span>
                    </span>
                  </el-tree>
                </div>
              </div>
            </div>
          </div>
          <div v-show="!infoFlag" class="t4_r t4_r_sj phone_css" style="height: auto; min-height: 560px">
            <div class="lTop-box">
              <div class="proList">
                <div class="filter-container" style="width: 100%;">
                  领域筛选：
                  <ul class="clearfix transUl" :style="{height:maxHeight}">
                    <li style="margin-top: 10px;" v-for="(item, index) in items" :key="index"
                      :class="{ 'highlighted': selectedItem == item }" @click="selectItem(item)"
                      :title="item.name">
                      {{ item.name }}
                    </li>
                  </ul>
                  <div class="toggleBtn" v-if="items.length > 5" @click="toggleMore">
                    <span v-show="!isOpen">展&nbsp;开</span>
                    <span v-show="isOpen">收&nbsp;起</span>
                  </div>
                </div>
              </div>
              <div class="proList">

                <div class="filter-container" style="width: 100%;">标签筛选：
                  <ul class="clearfix transUl" :style="{height:maxHeight}">
                    <li style="margin-top: 10px;" v-for="(items, index) in itemss" :key="index"
                      :class="{ 'highlighted': selectedItems == items }" @click="selectItems(items)"
                      :title="items.name">
                      {{ items.name }}
                    </li>
                  </ul>
                  <div class="toggleBtn" v-if="itemss.length > 5" @click="toggleMore">
                    <span v-show="!isOpen">展&nbsp;开</span>
                    <span v-show="isOpen">收&nbsp;起</span>
                  </div>
                </div>
              </div>
              <div class="proList">
                <div class="filter-container" style="width: 100%;">场景筛选：
                  <ul class="clearfix transUl" :style="{height:maxHeight}">
                    <li style="margin-top: 10px;" v-for="(itemss, index) in itemsss" :key="index"
                      :class="{ 'highlighted': selectedItemss == itemss }" @click="selectItemss(itemss)"
                      :title="itemss.name">
                      {{ itemss.name }}
                    </li>
                  </ul>
                  <div class="toggleBtn" v-if="itemsss.length > 5" @click="toggleMore">
                    <span v-show="!isOpen">展&nbsp;开</span>
                    <span v-show="isOpen">收&nbsp;起</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="listToggle">
              <span @click="toggleList('info')"><img style="width: 18px" :src="infoImg" alt="" /></span>
              <span @click="toggleList('list')"><img style="width: 20px" :src="listImg" alt="" /></span>
            </div>
            <div class="t4_r_top t4_border" style="height: auto">
              <div class="t4_r_sjCons">
                <!-- 目录列表 -->
                <div class="t4_sjCons" style="display: block">
                  <div v-if="listFlag === 'info'" v-for="(item, index) in infoList" :key="index"
                    class="t2_sjCons_list t2_result_list_r2">
                    <h2 class="titBox">
                      <a @click="infoHandle(item)"><img src="@/assets/images/share.png"
                          style="padding: 0 8px; height: 24px" />{{ item.name }}</a>
                      <div class="sqBtn">
                        <el-button type="text" v-if="item.isApp == 0">待审核</el-button>
                        <el-button type="text" v-if="item.isApp == 1">审核通过</el-button>
                        <el-button type="text" v-if="item.isApp == 2">无条件共享</el-button>
                        <el-button plain size="small" v-if="item.isApp == 3"
                          @click="approvalBtn(item)">申&nbsp;请</el-button>
                      </div>
                    </h2>
                    <div class="zyInfoBox">
                      <div></div>
                      <div class="zyInfo">
                        <div>资源分类：{{ item.meunName }}</div>
                        <div class="infoItem_box">
                          <div class="infoItem">
                            <div>资源提供方：{{ item.xxzytgf }}</div>
                            <div>共享类型：{{ item.gxtype }}</div>
                          </div>
                          <div class="infoItem">
                            <div>创建时间：{{ item.createTime }}</div>
                            <div>更新周期：{{ item.frequency }}</div>
                          </div>
                          <div class="infoItem">
                            <div>更新日期：{{ item.createTime }}</div>
                            <div>
                              共享方式：
                              {{ item.gxfs }}
                            </div>
                          </div>
                          <div class="infoItem">
                            <div>
                              资源类型：{{
                                item.deptType == 0 ? "数据资源" : "服务资源"
                              }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="listFlag === 'list'">
                    <el-table :data="infoList" border style="width: 100%; margin-top: 25px"
                      @selection-change="handleSelectionChange">
                      <el-table-column prop="name" show-overflow-tooltip label="信息资源名称">
                        <template slot-scope="scope">
                          <div :style="{
                            display: 'flex',
                            justifyContent: 'space-around',
                          }">
                            <a @click="infoHandle(scope.row)" style="
                                cursor: pointer;
                                width: calc(100% - 22px);
                                overflow: hidden;
                                text-overflow: ellipsis;
                              ">{{ scope.row.name }}</a>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="xxzytgf" label="资源提供方" show-overflow-tooltip width="110">
                      </el-table-column>
                      <el-table-column prop="meunName" label="资源分类" width="100">
                      </el-table-column>
                      <el-table-column prop="gxfs" label="共享方式" width="100">
                      </el-table-column>
                      <el-table-column prop="gxtype" label="共享类型" width="100">
                      </el-table-column>
                      <el-table-column prop="createTime" label="更新时间" width="180">
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="" id="pageDiv">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="pageNo" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                      layout="prev, pager, next, sizes, jumper" :total="totalNum">
                    </el-pagination>
                  </div>
                </div>
                <!-- 目录列表 end -->
              </div>
            </div>
          </div>
          <div v-show="infoFlag" class="t4_r t4_r_sj phone_css" style="height: auto; min-height: 560px">
            <div class="listToggle backBtn">
              <!-- infoFlag = false -->
              <el-button size="small" type="primary" @click="goindex">返回列表</el-button>
            </div>
            <dataInfo :updateCycleList="updateCycleList" :shareTypeList="shareTypeList" :ShareModeList="ShareModeList"
              :resTpye="resTpye"></dataInfo>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="资源申请" :visible.sync="approvalDialog.show" top="40px" width="800px" append-to-body>
      <!-- infoList -->
      <approval v-show="approvalDialog.show" ref="initxxx" @refresh="refresh"
        :dataList="isActiveDuo == 0 ? ItemProps : infoList" :bmId="bmId" @closeDialog="handleCloseDialog"
        :approvalDialog="approvalDialog"></approval>
    </el-dialog>
  </el-main>
</template>

<script>
import { addr } from "../../assets/js/public.js";
import dataInfo from "./dataInfo";
import approval from "./approval";
import Cookies from "js-cookie";
import {
  topFive,
  getCatalogData,
  getResourceList,
  getProviderList,
  getUpdateCycle,
  getCatalogSeek,
  getResourceCode,
  getSjmlTree,
  getSjmlTreeList, sjmlss,
} from "../../utils/httpUtils";
import listImg from "@/assets/images/list.png";
import listImgAct from "@/assets/images/list-act.png";
import infoImg from "@/assets/images/infoList.png";
import infoImgAct from "@/assets/images/infoList-act.png";
import sqlImg from "@/assets/images/sql.png";
import apiImg from "@/assets/images/APIserve.png";
import fileImg from "@/assets/images/file.png";

export default {
  name: "index",
  components: {
    dataInfo,
    approval,
  },
  data() {
    return {
      maxHeight: '45px',
      isOpen: false,
      jcid: null,
      bqid: null,
      cjid: null,
      selectedItem: '全部',
      selectedItems: '全部',
      selectedItemss: '全部',
      tokens: JSON.parse(Cookies.get("token")),
      lydata: [],
      lydatas: [],
      lydatass: [],
      items: [],
      itemss: [],
      itemsss: [],
      bmId: "",
      eventDisabled: false,
      showFlag: false,
      checkActArr: [],
      resTpye: "",
      infoFlag: false,
      checkAll: false,
      listFlag: "info",
      checkList: [],
      filterText: "",
      defaultProps: {
        children: "cMeunDepts",
        label: "name",
      },
      isActiveDuo: -1,
      // 热门关键词
      hotWordList: [],
      // 搜索内容
      searchInfo: "",
      deptArr: [],
      deptAct: "",
      infoList: [],
      listImg: listImg,
      infoImg: infoImgAct,
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      totalNum: 0,
      pageNo: 1,
      code: "",
      name: "",
      flag: true,
      institutionCodes: "",
      providerList: [],
      updateCycleList: [],
      shareTypeList: [],
      ShareModeList: [],
      resTypeList: [
        {
          code: 0,
          name: "数据资源",
        },
        {
          code: 1,
          name: "服务资源",
        },
      ],
      approvalDialog: {
        show: false,
      },
      ItemProps: [],
    };
  },
  mounted() {
    this.getsonlist()
    this.init();
    // if (this.$route.query.searchVal) {
    //   this.searchInfo = this.$route.query.searchVal;
    //   this.searchHandle();
    // }
  },
  created() {
    if (this.$route.query.catalogData) {
      this.$nextTick(() => {
        this.infoHandle(this.$route.query.catalogData);
      });
    }
  },

  computed: {
    // filteredItems() {
    //         return this.items.filter(item =>
    //             item.includes(this.filterText)
    //         );
    //     },
    isActive() {
      return this.infoList.every((item) => !item.isAct);
    },
  },
  watch: {
  //   infoList(val) {
  //     this.infoListAno = [];
  //     if ((val || []).length) {
  //       val.forEach((element, index) => {
  //         getResourceCode(element.code).then((res) => {
  //           if (res.code === "000000") {
  //             this.infoListAno[index] = JSON.parse(res.data);
  //             this.$forceUpdate();
  //           }
  //         });
  //       });
  //     }
  //   },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    toggleMore() {
      this.isOpen = !this.isOpen
      if(this.isOpen) {
        this.maxHeight = 'max-content'
      }else {
        this.maxHeight = '45px'
      }
    },
    refresh() {
      this.getListData()
    },
    getsonlist() {
      this.$axios({
        url: xhDomain + `/api/meunDept/sonList?type=2`,
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          "Authorization": this.tokens
        },
        // data: params
      }).then((res) => {
        console.log(res, "sonlist");
        // 清空 this.items 数组
        this.items = [];

        // 首先向 this.items 添加一个特殊的对象
        this.items.push({
          name: "全部",
          id: ""
        });

        // 然后
        this.lydata = res.data
        this.lydata.forEach((item) => {
          this.items.push({
            name: item.name,
            id: item.id
          });
        })
        // 默认选中 "全部" 这一项
        this.selectedItem = this.items[0];
        console.log(this.selectedItem, "选中的item");

      })
      this.$axios({
        url: xhDomain + `/api/meunDept/sonList?type=3`,
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          "Authorization": this.tokens
        },
        // data: params
      }).then((res) => {
        console.log(res, "sonlist");
        // 清空 this.items 数组
        this.itemss = [];

        // 首先向 this.items 添加一个特殊的对象
        this.itemss.push({
          name: "全部",
          id: ""
        });

        // 然后
        this.lydatas = res.data
        this.lydatas.forEach((item) => {
          this.itemss.push({
            name: item.name,
            id: item.id
          });
        })
        // 默认选中 "全部" 这一项
        this.selectedItems = this.itemss[0];
        console.log(this.selectedItems, "选中的item");

      })
      this.$axios({
        url: xhDomain + `/api/meunDept/sonList?type=4`,
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          "Authorization": this.tokens
        },
        // data: params
      }).then((res) => {
        console.log(res, "sonlist");
        // 清空 this.items 数组
        this.itemsss = [];

        // 首先向 this.items 添加一个特殊的对象
        this.itemsss.push({
          name: "全部",
          id: ""
        });

        // 然后
        this.lydatass = res.data
        this.lydatass.forEach((item) => {
          this.itemsss.push({
            name: item.name,
            id: item.id
          });
        })
        // 默认选中 "全部" 这一项
        this.selectedItemss = this.itemsss[0];
        console.log(this.selectedItemss, "选中的item");

      })


    },
    selectItem(item) {
      console.log(item, "选中的item")
      this.selectedItem = item;
      this.jcid = item.id
      this.getListData()
    },
    selectItems(item) {
      console.log(item, "选中的item")
      this.selectedItems = item;
      this.bqid = item.id
      this.getListData()
    },
    selectItemss(item) {
      console.log(item, "选中的item")
      this.selectedItemss = item;
      this.cjid = item.id
      this.getListData()
    },
    handleCloseDialog() {
      // 处理 closeDialog 事件
      this.approvalDialog.show = false;
    },
    // 申请按钮
    approvalBtn(parmas) {
      console.log(parmas, "点击申请");
      this.approvalDialog = {
        show: true,
      };
      this.bmId = parmas.id;
      // 调用子组件的重置方法
      setTimeout(() =>{
        if( this.$refs.initxxx){
          this.$refs.initxxx.getbmFn();
          this.$refs.initxxx.getsprFn();
        }
      },100)

    },
    init() {
      this.getHotWord();
      this.getData();
      this.getProvider();
      this.getTypeList();
      this.getListData()
    },
    getTypeList() {
      //获取更新频率字段
      getUpdateCycle("updateCycle").then((res) => {
        if (res) {
          this.updateCycleList = res.data;
        }
      });
      // 获取共享类型字段
      getUpdateCycle("shareType").then((res) => {
        if (res) {
          this.shareTypeList = res.data;
        }
      });
      // 获取共享方式字段
      getUpdateCycle("ShareMode").then((res) => {
        if (res) {
          this.ShareModeList = res.data;
        }
      });
    },
    // 获取数据
    getData() {
      let param = {
        type: 0,
      };
      getSjmlTree(param).then((res) => {
        this.deptArr = [res];
      });

      // if (res && res.tree) {
      //   let arr = [];
      //   arr.push(res.tree);
      //   this.deptArr = arr;
      //   this.$nextTick(() => {
      //     this.$refs.tree.setCurrentKey(this.deptArr[0].id);
      //   });
      // }
      // if (res && res.pageInfo) {
      //   res.pageInfo.totalList.forEach((item) => {
      //     item.isAct = false;
      //   });
      //   this.infoList = res.pageInfo.totalList;
      //   this.getDetailData();
      //   this.currentPage = res.pageInfo.currentPage;
      //   this.pageSize = res.pageInfo.pageSize;
      //   this.totalNum = res.pageInfo.totalPageNum;
      // }
    },
    // 获取资源提供方
    getProvider() {
      getProviderList().then((res) => {
        if (res) {
          this.providerList = res.data;
        }
      });
    },
    // 获取列表数据
    getListData() {
      let param = {
        pageNo: this.pageNo,
        size: this.pageSize,
        id: this.code ? this.code : 2,
        deptType: 0,
        jcid: this.jcid,
        bqid: this.bqid,
        cjid: this.cjid,
        name: this.searchInfo
      };
      getSjmlTreeList(param).then((res) => {
        this.infoList = res.content.map((item) => {
          return { ...item, isAct: false }; // 返回一个新对象，包括原有属性和新的 isAct 属性
        });
        this.totalNum = res.totalElements;
      });
    },
    // 获取详细表格信息
    // getDetailData() {
    //   this.infoList.forEach((element) => {
    //     getResourceCode(element.code).then((res) => {
    //       if (res.code === "000000") {
    //         element.detailData = JSON.parse(res.data);
    //         this.$forceUpdate();
    //       }
    //     });
    //   });
    // },
    // 点击树形结构
    chooseDeptList(data, node) {
      console.log(data.id, "树data");
      this.code = data.id;
      this.pageNo = 1;  // 重置 pageNo 为 1
      this.$nextTick(() => { // 确保分页组件更新
        this.getListData();
      });
    },
    // 选择资源提供方
    choosePro(val) {
      this.institutionCodes = val ? val.code : "";
      this.pageNo = 1;
      this.getListData();
    },
    // 改变数据显示条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getListData();
    },
    async getHotWord() {
      const { data: res } = await topFive();
      console.log(data, '热词====')
      if (res) {
        this.hotWordList = res;
      }
      // topFive().then(res=>{
      //   console.log(res,'热词====')
      //   this.hotWordList = res.data.data;
      // })
    },
    // hotClick(val) {
    //   this.searchInfo = val;
    //   // 搜索
    //   this.searchHandle();
    // },
    searchHandle() {
      sjmlss({ name: this.searchInfo }).then(res => {
        console.log(res, '搜索结果====')
      })
      // let param = {
      //   pageNo: 1,
      //   pageSize: 10,
      //   name: this.searchInfo,
      // };
      // getCatalogSeek(param).then((res) => {
      //   if (res.data && res.data.tree) {
      //     let arr = [];
      //     arr.push(res.data.tree);
      //     this.deptArr = arr;
      //     this.$nextTick(() => {
      //       this.$refs.tree.setCurrentKey(this.deptArr[0].id);
      //     });
      //   }
      //   if (res.data && res.data.pageInfo) {
      //     this.infoList = res.data.pageInfo.totalList;
      //     this.getDetailData();
      //     this.currentPage = res.data.pageInfo.currentPage;
      //     this.pageSize = res.data.pageInfo.pageSize;
      //     this.totalNum = res.data.pageInfo.totalPageNum;
      //   }
      // });
    },
    // 复选框
    changeHandle(event, val) {
      this.eventDisabled = event;
      this.infoList.forEach((item) => {
        if (item.id == val.id) {
          item.isAct = event;
        }
      });
    },
    // 切换数据显示样式
    toggleList(val) {
      this.listFlag = val;
      if (val === "info") {
        if (this.infoImg === infoImg) {
          this.infoImg = infoImgAct;
          this.listImg = listImg;
        }
      } else {
        if (this.listImg === listImg) {
          this.listImg = listImgAct;
          this.infoImg = infoImg;
        }
      }
    },
    infoHandle(val) {
      console.log(val, "val");
      this.infoFlag = true;
      this.$bus.$emit("dataInfo", val);
      this.$bus.$emit("infoList1", this.infoList);
      // document.documentElement.scrollTop = 250;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 格式化数据
    initInfo(val, type) {
      if (type === "updateCycle") {
        let isHas = this.updateCycleList.find((item) => {
          return item.code == val;
        });
        if (isHas) {
          return isHas.name;
        }
      } else if (type === "shareType") {
        let isHas = this.shareTypeList.find((item) => {
          return item.code == val;
        });
        if (isHas) {
          return isHas.name;
        }
      } else if (type === "resourceType") {
        let isHas = this.resTypeList.find((item) => {
          return item.code == val;
        });
        if (isHas) {
          this.resTpye = isHas.name;
          return isHas.name;
        }
      } else if (type === "ShareMode") {
        let arr = val.split(",");
        let arrTemp = [];
        for (let i = 0; i < arr.length; i++) {
          let isHas = this.ShareModeList.find((item) => {
            return item.code == arr[i];
          });
          if (isHas) {
            arrTemp.push({
              code: isHas.code,
              name: isHas.name,
              src:
                isHas.code == 0
                  ? sqlImg
                  : isHas.code == 1
                    ? fileImg
                    : isHas.code == 2
                      ? apiImg
                      : "",
            });
          }
        }
        return arrTemp;
      }
    },
    formatterRow(row) {
      return this.initInfo(row.shareType, "shareType");
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    chooseAll() {
      this.checkAll = !this.checkAll;
      this.infoList.forEach((item) => {
        item.isAct = this.checkAll;
      });
    },
    approvalBtnClick() {
      if (this.ItemProps.length > 0) {
        this.isActiveDuo = 1;
      }
      this.approvalDialog = {
        show: true,
      };
    },
    // clearText(event) {
    //   event.stopPropagation();
    //   this.searchInfo = "";
    // },
    goindex() {
      this.infoFlag = false;
      this.infoList.forEach((item) => {
        item.isAct = false;
      });
      this.$bus.$emit("initxxx", "");
    },
  },
};
</script>

<style scoped>
.filter-container{
  position: relative;
}
.toggleBtn {
  position: absolute;
  bottom: 12px;
  right: -15px;
  cursor: pointer;
}
.clearfix:after {
  content:'';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
}
.clearfix{
  display: block;
}
.transUl {
  overflow: hidden;
  /*transition: height 3s;*/
}
.el-main {
  padding: 0;
}

.t4_qb {
  width: 70px;
  padding: 5px;
  background: #198ef8;
  float: left;
  text-align: center;
  cursor: pointer;
}

.t4_qb a {
  color: #fff;
}

.t4_r.t4_r_sj.t4_border.phone_css {
  height: 950px;
}

.t4_search ul li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lTop-box {
  padding: 0 0 15px;
  background-color: #f7f8fa;
}

.lTop-box .proList {
  padding: 15px 30px;
  background-color: #fff;
  border-bottom: 4px solid #198ef8;
  display: flex;
  flex-direction: row;
}

.lTop-box .proList .tit {
  width: 85px;
  padding: 5px 0;
}

.lTop-box .proList ul {
  flex: 1;
  padding: 0;
  margin: 0;
}

.lTop-box .proList ul li {
  float: left;
  text-align: center;
  padding: 5px 10px;
  height: 30px;
  width: 18.5%;
  margin: 0 5px;
  background-color: #f8f8f8;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 24px;
  padding-right: 24px;
}

.lTop-box .proList ul li.proAct {
  background-color: #f1f8ff;
  color: #204dac;
}

.listToggle {
  padding: 13px 20px;
}

.listToggle span {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

.listToggle.backBtn {
  border-bottom: 4px solid #198ef8;
}

#pageDiv {
  text-align: center;
  padding: 20px;
}

#pageDiv /deep/ .el-select__caret {
  width: auto;
  height: auto;
}

#pageDiv /deep/ .el-pagination__jump {
  color: #606266;
  margin: 0;
}

.gxfs img {
  width: 20px;
}

.zyInfoBox {
  display: flex;
  flex-direction: row;
}

.zyInfoBox .zyInfo {
  flex: 1;
  margin-left: 8px;
  font-size: 13px;
}

.zyInfoBox .zyInfo .infoItem_box {
  display: flex;
  flex-direction: row;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem {
  flex: 1;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem>div {
  margin-top: 8px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox,
.el-table .imgBox {
  display: inline-block;
  margin-right: 5px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img.sqlImg,
.el-table .imgBox img.sqlImg {
  width: 18px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img,
.el-table .imgBox img {
  width: 22px;
}

h2.titBox {
  position: relative;
}

h2.titBox .sqBtn {
  position: absolute;
  right: 0;
  top: 0;
}

h2.titBox a {
  cursor: pointer;
}

/*#sjbm a {*/
/*  line-height: 40px;*/
/*  display: inline-block;*/
/*  width: 160px;*/
/*  white-space: nowrap;*/
/*  text-overflow: ellipsis;*/
/*  overflow: hidden;*/
/*}*/
.table-img {
  transform: translateY(-1px);
}

.t4_banner {
  position: relative;
}

.t4_banner .t4_bannerBOX {
  width: 90%;
  margin: 0 auto;
}

.t4_banner .t4_bannerBOX .list_Ul {
  cursor: pointer;
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 40px;
  height: 10px;
}

.t4_banner .t4_bannerBOX .list_Ul li {
  margin-left: 10px;
  color: #5f5f5f;
}

.t4_banner .t4_bannerBOX .list_Ul a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/deep/.t4_banner .el-input-group--append .el-input__inner {
  height: 50px;
  line-height: 50px;
  background: #fff;
  border: 1px solid #fff;
  color: rgb(99, 99, 99);
  text-indent: 15px;
}

/deep/.t4_banner .el-input-group__append {
  background-color: #198ef8;
  color: #fff;
  border: none;
}

.highlighted {
  background: #198ef8 !important;
  color: #fff !important;
}
</style>
